<template>
  <a-card class="j-inner-table-wrapper" :bordered="false">
    <!-- 查询区域 begin -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="仓库编码">
              <a-input v-model="queryParam.storeCode" placeholder="请输入仓库编码" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="仓库名称">
              <a-input v-model="queryParam.storeName" placeholder="请输入仓库名称" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="仓库类型">
              <j-dict-select-tag v-model="queryParam.type" placeholder="请选择仓库类型" dictCode="store_type" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="负责人姓名">
              <a-input v-model="queryParam.principalName" placeholder="请输入负责人姓名" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="负责人电话">
              <a-input v-model="queryParam.principalPhone" placeholder="请输入负责人电话" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="承租开始日期">
              <j-date
                class="query-group-cust-storelist"
                v-decorator="['startDate', validatorRules.startDate]"
                :trigger-change="true"
                placeholder="请选择开始日期"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="承租到期日期">
              <j-date
                class="query-group-cust-storelist"
                v-decorator="['endDate', validatorRules.endDate]"
                :trigger-change="true"
                placeholder="请选择结束日期"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span class="table-page-search-submitButtons table-operator">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" @click="searchResetHandler">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                <span>{{ toggleSearchStatus ? '收起' : '展开' }}</span>
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域 end -->

    <!-- 操作按钮区域 begin -->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('仓库表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            <span>删除</span>
          </a-menu-item>
        </a-menu>
        <a-button>
          <span>批量操作</span>
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <!-- 操作按钮区域 end -->

    <!-- table区域 begin -->
    <div>
      <a-alert type="info" showIcon style="margin-bottom: 16px">
        <template slot="message">
          <span>已选择</span>
          <a style="font-weight: 600; padding: 0 4px">{{ selectedRowKeys.length }}</a>
          <span>项</span>
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </template>
      </a-alert>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :expandedRowKeys="expandedRowKeys"
        :rowSelection="{ selectedRowKeys, onChange: onSelectChange }"
        @expand="handleExpand"
        @change="handleTableChange"
      >
        <!-- 内嵌table区域 begin -->
        <template slot="expandedRowRender" slot-scope="record">
          <a-tabs tabPosition="top">
            <a-tab-pane tab="仓库仓位表" key="bizStoreSpace" forceRender>
              <biz-store-space-sub-table :record="record" />
            </a-tab-pane>
          </a-tabs>
        </template>
        <!-- 内嵌table区域 end -->

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <div style="font-size: 12px; font-style: italic">
            <span v-if="!text">无图片</span>
            <img v-else :src="getImgView(text)" alt="" style="max-width: 80px; height: 25px" />
          </div>
        </template>

        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
          <a-button v-else ghost type="primary" icon="download" size="small" @click="downloadFile(text)">
            <span>下载</span>
          </a-button>
        </template>

        <template slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              <span>更多 <a-icon type="down" /></span>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </a-table>
    </div>
    <!-- table区域 end -->

    <!-- 表单区域 -->
    <biz-store-modal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import { pca, pcaa } from 'area-data'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import BizStoreModal from './modules/BizStoreModal'
import BizStoreSpaceSubTable from './subTables/BizStoreSpaceSubTable'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JDate from '@/components/jeecg/JDate.vue'
// import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import '@/assets/less/TableExpand.less'

export default {
  name: 'BizStoreList',
  mixins: [JeecgListMixin],
  components: {
    BizStoreModal,
    BizStoreSpaceSubTable,
    JDate,
    JDictSelectTag,
  },
  data() {
    return {
      description: '仓库表列表管理页面',
      form: this.$form.createForm(this),
      // 表头
      columns: [
        {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (t, r, index) => parseInt(index) + 1,
        },
        {
          title: '仓库编码',
          align: 'center',
          dataIndex: 'storeCode',
        },
        {
          title: '仓库名称',
          align: 'center',
          dataIndex: 'storeName',
        },
        {
          title: '仓库类型',
          align: 'center',
          dataIndex: 'type_dictText',
        },
        {
          title: '省/市/区',
          align: 'center',
          dataIndex: 'areaValue',
          customRender: this.getAreaData,
        },
        {
          title: '仓库地址',
          align: 'center',
          dataIndex: 'address',
        },
        {
          title: '负责人姓名',
          align: 'center',
          dataIndex: 'principalName',
        },
        {
          title: '负责人电话',
          align: 'center',
          dataIndex: 'principalPhone',
        },
        {
          title: '承租开始日期',
          align: 'center',
          dataIndex: 'startDate',
        },
        {
          title: '承租到期日期',
          align: 'center',
          dataIndex: 'endDate',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 校验
      validatorRules: {
        endDate: {
          rules: [{ validator: this.endDateRule }],
        },
        startDate: {
          rules: [{ validator: this.startDateRule }],
        },
      },
      // 字典选项
      dictOptions: {},
      // 展开的行test
      expandedRowKeys: [],
      url: {
        list: '/storage/store/list',
        delete: '/storage/store/delete',
        deleteBatch: '/storage/store/deleteBatch',
        exportXlsUrl: '/storage/store/exportXls',
        importExcelUrl: '/storage/store/importExcel',
      },
    }
  },
  computed: {
    importExcelUrl() {
      return window._CONFIG['domianURL'] + this.url.importExcelUrl
    },
  },
  methods: {
    initDictConfig() {},
    // 重置
    searchResetHandler() {
      this.searchReset()
      this.form.setFieldsValue({ startDate: '', endDate: '' })
    },
    handleExpand(expanded, record) {
      this.expandedRowKeys = []
      if (expanded === true) {
        this.expandedRowKeys.push(record.id)
      }
    },

    // 获取省市区
    getAreaData(text, record, index) {
      let city = text.substr(0, 4) + '00'
      let province = text.substr(0, 2) + '0000'
      return pca['86'][province] + '/' + pcaa[province][city] + '/' + pcaa[city][text]
    },

    /* 校验规则 */
    endDateRule(rule, value, callback) {
      const form = this.form
      let endTime = value ? new Date(value).getTime() : 0
      let startTime = form.getFieldValue('startDate') ? new Date(form.getFieldValue('startDate')).getTime() : 0

      if (endTime) {
        if (endTime >= startTime) {
          this.isDateRule = true
          this.queryParam.endDate_end = value
          callback()
        } else {
          this.isDateRule = false
          callback('承租结束日期须大于承租开始日期')
        }
      } else {
        this.isDateRule = true
        this.queryParam.endDate_end = value
        callback()
      }
    },
    startDateRule(rule, value, callback) {
      const form = this.form
      let startTime = value ? new Date(value).getTime() : 0
      let endTime = form.getFieldValue('endDate') ? new Date(form.getFieldValue('endDate')).getTime() : 0

      if (endTime) {
        if (startTime - endTime > 0) {
          this.isDateRule = false
          callback('承租开始日期须小于承租结束日期')
        } else {
          this.isDateRule = true
          this.queryParam.startDate_begin = value
          callback()
        }
      } else {
        this.isDateRule = true
        this.queryParam.startDate_begin = value
        callback()
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>